<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import Navigation from './components/Navigation.vue';
import { dialog } from '@/settings/components/dialog';

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  updateTime: [],
  isSelected: -1,
  keywords: '',
  createName: '',
});
const typeList = [
  {
    value: -1,
    text: t('settings.view.repository.application.all'),
  },
  {
    value: 1,
    text: t('settings.view.repository.application.selected'),
  },
  {
    value: 0,
    text: t('settings.view.repository.application.notFeatured'),
  },
];

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/warehouse/list', {
    method: 'post',
    data: {
      pageNum: page,
      pageSize: 20,
      approvalStatus: 1,
      keywords: form.value.keywords,
      createName: form.value.createName,
      isSelected: form.value.isSelected,
      beginCreateTime: form.value.updateTime?.[0],
      endCreateTime: form.value.updateTime?.[1],
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const unsetTop = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/warehouse/cancelTop', {
    data: {
      id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

const setTop = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/warehouse/setupTop', {
    data: {
      id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/warehouse/unBind', {
    method: 'post',
    data: {
      id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

const editLabel = async (record: Record<string, any>) => {
  const { button } = await dialog(() => import('./label-window.vue'), {
    title: t('settings.view.repository.dialog.label.title'),
    props: {
      id: record.warehouseId,
      labelIds: record.labelRelVoList.map((item: Record<string, any>) => item.labelId),
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
}
</script>

<template>
  <OpenPageSection>
    <OpenGeneralCard>
      <Navigation />

      <OpenSearchTable title="" :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
        <template #search-before>
          <div class="mb-20">
            <ARadioGroup v-model="form.isSelected" @change="refresh()">
              <ARadio v-for="item in typeList" :key="item.value" :value="item.value">
                <template #radio="{ checked }">
                  <ATag :checked="checked" size="large" color="arcoblue" checkable>{{ item.text }}</ATag>
                </template>
              </ARadio>
            </ARadioGroup>
          </div>
        </template>

        <template #header>
          <AFormItem :label="$t('settings.view.repository.application.column')">
            <AInput v-model="form.keywords" allow-clear />
          </AFormItem>
          <AFormItem :label="$t('settings.view.repository.application.linkTime')">
            <ARangePicker v-model="form.updateTime" />
          </AFormItem>
          <AFormItem :label="$t('settings.view.repository.application.applicant')">
            <AInput v-model="form.createName" allow-clear />
          </AFormItem>
        </template>

        <template #columns>
          <ATableColumn :title="$t('settings.view.repository.application.column')">
            <template #cell="{ record }">
              <ALink target="_blank" :href="record.jump">{{ record.belongName }}/{{ record.name }}</ALink>
            </template>
          </ATableColumn>

          <ATableColumn :title="$t('settings.view.repository.application.briefIntroduction')" data-index="description" tooltip ellipsis />

          <ATableColumn :title="$t('settings.view.repository.application.column3')">
            <template #cell="{ record }">
              <ASpace wrap>
                <ATag v-for="item in record.labelRelVoList" :key="item.labelId">{{ item.labelName }}</ATag>
              </ASpace>
            </template>
          </ATableColumn>

          <ATableColumn :title="$t('settings.view.repository.application.column1')" data-index="starCount" :width="100" />
          <ATableColumn :title="$t('settings.view.repository.application.column2')" data-index="forkCount" :width="100" />

          <ATableColumn :title="$t('settings.view.repository.application.applicant')" header-cell-class="w-10%">
            <template #cell="{ record }">
              <ALink target="_blank" :href="record.userPathUrl">{{ record.createName }}</ALink>
            </template>
          </ATableColumn>

          <ATableColumn :title="$t('settings.view.repository.application.linkTime')" data-index="updateTime" :width="180" />

          <ATableColumn :title="$t('settings.table.column.action')" header-cell-class="w-13%">
            <template #cell="{ record }">
              <div class="button-actions">
                <AButton size="small" @click="editLabel(record)">
                  {{ $t('settings.view.repository.application.action.editLabel') }}
                </AButton>
                <AButton type="primary" size="small" v-confirm v-if="record.isSelected == 0" @click="setTop(record.id)">
                  {{ $t('settings.view.repository.application.action.selected') }}
                </AButton>
                <AButton size="small" v-confirm v-if="record.isSelected == 1" @click="unsetTop(record.id)">
                  {{ $t('settings.view.repository.application.action.notFeatured') }}
                </AButton>
                <AButton status="danger" size="small" v-confirm @click="remove(record.id)">
                  {{ $t('settings.view.repository.application.action.unbinding') }}
                </AButton>
              </div>
            </template>
          </ATableColumn>
        </template>
      </OpenSearchTable>
    </OpenGeneralCard>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
